<template>
  <div class="sideBar">
    <el-menu v-if="refreshMenu" style="height: 100%" class="el-menu-vertical-demo" background-color="#001529"
      text-color="#fff" active-text-color="#fff" :collapse="$store.state.isCollapse" :unique-opened="true"
      :default-active="$route.path" :mode="isMobileFlag ? 'horizontal' : 'vertical'" :menu-trigger="isMobileFlag ? 'click': 'hover'">
      <div class="project_title">
        <img v-if="$store.state.isCollapse" class="logo" src="@/assets/logo.png" />
        <div v-else class="appName">{{appName}}</div>
      </div>
      <!-- <el-menu-item index="/index" @click="turnMenu({url: '/index', name: '首页'})">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item> -->
      <el-submenu v-for="(item,index) in menuList" :key="index" :index="String(index+1)">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{item.title}}</span>
        </template>
        <el-menu-item :index="menu.url" v-for="(menu,menuIndex) in item.menus" :key="menuIndex" @click="turnMenu(menu)"
          v-if="(menu.permission && menu.permission.indexOf(userInfo.userType) !== -1) || !menu.permission">{{menu.name}}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
  import Menu from "@/lib/menu";
  export default {
    name: "sideBar",
    components: {},
    data() {
      return {
        isMobileFlag: this.$utils.isMobile(),
        themeColor: this.$store.state.themeColor, //主题颜色
        appName: this.$store.state.appName,
        menuList: [],
        refreshMenu: true, // 用于强制重新渲染菜单
      };
    },
    methods: {
      turnMenu(item) {
        // 点击菜单跳转
        this.$router.push({
          path: item.url
        });
      },
      changeCollapse() {
        //改变导航栏状态
        this.$store.commit("changeCollapse");
      },
      getUserInfo() {
        this.$api.user.getUserInfo().then((res) => {
          this.$store.commit("setUserInfo", res.data);
          // userType 0管理员，1供货商
          if (res.data.userType === 0) { // 必须这么写，防止菜单无法自动选中
            // 管理员菜单
            this.menuList.push(
              Menu.adminMenu,
              Menu.containerMenu,
              Menu.medicineMenu,
              Menu.statisticalListMenu,
              Menu.userCenterMenu,
            );
          } else {
            // 通用菜单
            this.menuList.push(
              Menu.containerMenu,
              Menu.medicineMenu,
              Menu.statisticalListMenu,
              Menu.userCenterMenu,
            );
          }
        });
      },
    },
    created() {
      // 调试！！！！
      this.menuList.push(
        Menu.adminMenu,
        Menu.userMenu,
      );
      // this.getUserInfo();
    },
  };
</script>

<style lang="scss" scoped>
  .sideBar {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1020;

    .project_title {
      width: 100%;
      height: 64px;
      text-align: center;
      line-height: 64px;
      border-right: solid 1px #e6e6e6;

      .appName {
        color: white;
        font-size: 25px;
      }

      .logo {
        margin: 12px;
        width: 40px;
        height: 40px;
      }
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;

      .el-submenu {
        i {
          margin-right: 10px;
        }
      }
    }
  }
</style>
